<script lang="ts" setup>
import { reactive, onActivated, ref, watchEffect } from 'vue'
import { useTable } from '@/hooks/useTable'
import { queryBoxAlarm } from '@/api/cabinet'
import { queryBoxAlarmTableCol } from '@/api/cabinet/types/cabinet'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import { OpUnitType } from 'dayjs'
import { FormInstance, DateModelType, dayjs } from 'element-plus'
const route = useRoute()
const form = reactive({
  boxCode: route.query.boxCode as string,
  type: '',
  startTime: '',
  endTime: ''
})
const formRef = ref<FormInstance | null>(null)
const { data, loading, load, pagination, handleCurrentChange, setCurrentPage, handleSizeChange } =
  useTable<queryBoxAlarmTableCol>(queryBoxAlarm, getToken() ?? '', () => form)

onActivated(() => {
  form.boxCode = (route.query.boxCode as string) || ''
})
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
const reset = () => {
  formRef.value?.resetFields()
  internalDateRange.value = ''
  type.value = ''
}
defineExpose({ load })
/** 时间选择 */
type ModelDateType = string | number | Date | [DateModelType, DateModelType]
type IDatePickerType =
  | 'year'
  | 'month'
  | 'date'
  | 'dates'
  | 'week'
  | 'datetime'
  | 'datetimerange'
  | 'daterange'
  | 'monthrange'
const type = ref('other')
const rangeType = ref<IDatePickerType>('datetimerange')
const datePlaceHolder = ref('请选择时间范围')
const dateFormat = ref('YYYY-MM-DD HH:mm:ss')
const internalDateRange = ref<ModelDateType>('')
watchEffect(() => {
  switch (type.value) {
    case 'other':
      rangeType.value = 'datetimerange'
      dateFormat.value = 'YYYY-MM-DD HH:mm:ss'
      internalDateRange.value = ['', '']
      datePlaceHolder.value = '请选择时间范围'
      break
    case 'day':
      rangeType.value = 'date'
      dateFormat.value = 'YYYY-MM-DD'
      internalDateRange.value = ''
      datePlaceHolder.value = '请选择日期'
      break
    case 'month':
      rangeType.value = 'month'
      dateFormat.value = 'YYYY-MM'
      internalDateRange.value = ''
      datePlaceHolder.value = '请选择月份'
      break
    case 'hour':
      rangeType.value = 'datetimerange'
      dateFormat.value = 'YYYY-MM-DD HH:mm:ss'
      internalDateRange.value = ['', '']
      datePlaceHolder.value = '请选择时间范围'
      break
  }
})
const handleDateChange = (value: string[] | string) => {
  if (value && value.length === 2) {
    form.startTime = value[0]
    form.endTime = value[1]
  } else {
    form.startTime = dayjs(value as string)
      .startOf(rangeType.value as OpUnitType)
      .format('YYYY-MM-DD HH:mm:ss')
    form.endTime = dayjs(value as string)
      .endOf(rangeType.value as OpUnitType)
      .format('YYYY-MM-DD HH:mm:ss')
  }
}
</script>

<template>
  <el-form inline ref="formRef" :model="form">
    <el-form-item label="电柜编号" prop="boxCode">
      <el-input v-model="form.boxCode" placeholder="请输入电柜编号" />
    </el-form-item>
    <el-form-item label="操作内容" prop="type">
      <el-select v-model="form.type" style="width: 120px">
        <el-option label="不限" value="" />
        <el-option value="电柜离线恢复" />
        <el-option value="电柜断网恢复" />
        <el-option value="取电池超时" />
        <el-option value="电柜离线" />
        <el-option value="电柜上线" />
        <el-option value="电柜剪线" />
        <el-option value="电柜断网" />
        <el-option value="仓门故障" />
        <el-option value="烟感报警" />
      </el-select>
    </el-form-item>
    <el-form-item label="时间">
      <el-select v-model="type" style="width: 120px">
        <el-option label="按时查询" value="hour" />
        <el-option label="按日查询" value="day" />
        <el-option label="按月查询" value="month" />
        <el-option label="自定义" value="other" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-date-picker
        v-model="internalDateRange"
        :key="rangeType"
        :type="rangeType"
        value-format="YYYY-MM-DD HH:mm:ss"
        :format="dateFormat"
        range-separator="至"
        start-placeholder="请选择"
        end-placeholder="请选择"
        :placeholder="datePlaceHolder"
        @change="handleDateChange"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleFormSearch">查询</el-button>
      <el-button plain @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data" v-loading="loading">
    <el-table-column prop="boxCode" label="电柜编号" />
    <el-table-column prop="category" label="报警类型" />
    <el-table-column prop="remark" label="内容" />
    <el-table-column prop="createdTime" label="报警时间" sortable />
  </el-table>
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
